<template>
    <div>
        <h3>房型增加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>
                        <input type="text" v-model="querinfo.HouseName">
                    </td>
                </tr>

                <tr>
                    <td>单价(元)</td>
                    <td>
                        <input type="text" v-model="querinfo.Price">
                    </td>
                </tr>

                <tr>
                    <td>室内面积(平方米)</td>
                    <td>
                        <input type="text" v-model="querinfo.Aera">
                    </td>
                </tr>

                <tr>
                    <td>最多入住人数</td>
                    <td>
                        <input type="text" v-model="querinfo.Count">
                    </td>
                </tr>

                <tr>
                    <td>图片上传</td>
                    <td>
                        <input type="file" @change="upfile">
                        <img :src="querinfo.Photo" width="150" height="100">
                    </td>
                </tr>

                <tr>
                    <td>房型描述</td>
                    <td>
                        <textarea cols="30" role="5" v-model="querinfo.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td>是否有窗</td>
                    <td>
                        <input type="radio" name="IsWindow" :value="1" v-model="querinfo.IsWindow">有窗
                        <input type="radio" name="IsWindow" :value="0" v-model="querinfo.IsWindow">无窗
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="保存" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
let querinfo:any=reactive({
  "HouseName": "",
  "Price": "",
  "Aera": "",
  "Count": "",
  "Photo": "",
  "Desc": "",
  "IsWindow": "",
})

const ok=()=>{
    axios({
        method:"post",
        url:"/api/House/HouseTypeAdd",
        data:querinfo
    })
    .then(res=>{
        if(res.data==-1){
            alert('房型名称重复')
        }
        else if(res.data>0){
            alert('添加成功')
            router.push('/houseTypeList')
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

const upfile=(e:any)=>{
    var m=e.target.files[0];
    var d=new FormData();
    d.append('file',m)
    axios({
        method:"post",
        url:"/api/House/Upfile",
        data:d
    })
    .then(res=>{
        console.log(res)
        if(res.data=="图片格式错误"){
            alert('图片格式错误')
        }
        else if(res.data=="超过2MB"){
            alert('超过2MB')
        }
        else{
            alert('上传成功')
            querinfo.Photo=res.data
        }
    })
}

</script>

<style scoped>

</style>